<template>
  <el-drawer
    v-model="drawer"
    title="使用帮助"
    direction="btt"
    size="70%"
  >
    <div class="help-box">
      <div class="help-box-left">
        <el-descriptions title="左侧" column="1" size="small" border>
          <el-descriptions-item label="domID前缀">用于生成html元素的ID，确保唯一，可以用【交易码】等</el-descriptions-item>
          <el-descriptions-item label="容器和组件">布局由容器和组件组成，先添加容器，选中容器后，再点击组件就能添加到容器上</el-descriptions-item>
          <el-descriptions-item label="容器">
            <div>空容器：目前只用作表格组件的父容器，不需要手动添加</div>
            <div>邮储新容器：用来添加常见的表单组件</div>
            <div>信息框表单容器：用来添加常见的表单组件，表单组件默认是禁用状态，样式上表现为浏览态</div>
          </el-descriptions-item>
          <el-descriptions-item label="组件列表">
            <div>组件目前有三种</div>
            <div>输入框组件：左侧是label,右侧是input</div>
            <div>按钮组：独占一行</div>
            <div>表格组件：独占一行，添加时，默认会添加一个【空容器】，然后在【空容器】内添加表格组件</div>
          </el-descriptions-item>
        </el-descriptions>      
      </div>
      <div class="help-box-center">
        <el-descriptions title="中间" column="1" size="small" border>
          <el-descriptions-item label="当前布局管理">对容器和组件进行【拖拽】排序，修改组件配置，设置隐藏的容器和组件在布局管理中仍然可见</el-descriptions-item>
          <el-descriptions-item label="下载">将当前展示的布局下载为html文件和js文件</el-descriptions-item>
          <el-descriptions-item label="容器和组件操作">
            <div>选中容器：点击容器，容器的边缘会有虚线，说明已选中，点击列表中的组件就能添加到该容器中。</div>
            <div>添加组件到容器：<span class="waring-color">不需要【拖拽】！！！</span>，选中容器，点击组件即可添加。</div>
            <div>修改容器：鼠标划到容器标题，显示工具栏，可以修改和删除。</div>
            <div>修改组件：鼠标划到组件label，显示工具栏，可以修改和删除。</div>
          </el-descriptions-item>
        </el-descriptions>         
      </div>
      <div class="help-box-right">
        <el-descriptions title="右侧" column="1" size="small" border>
          <el-descriptions-item label="账号">
            <div>输入账号回车【查询】账号下的页面列表</div>
            <div>没有账号就自己起一个11位的账号填入</div>
            <div>【新增】和【查询】都会用到此账号信息</div>
            <div>不需要【注册账号】，注意自己的账号一定要【唯一】</div>
          </el-descriptions-item>
          <el-descriptions-item label="新增布局">弹出新增弹窗，填写布局名称，保存布局</el-descriptions-item>
          <el-descriptions-item label="关闭操作提示">
            <div>勾选后，【编辑】【更新】【删除】等操作不会弹出提示</div>
          </el-descriptions-item>
          <el-descriptions-item label="布局列表">
            <div>输入账号回车【查询】账号下的页面列表</div>
          </el-descriptions-item>
          <el-descriptions-item label="编辑">
            <div>回显布局到当前布局，当前布局注意要做好保存工作！！！</div>
          </el-descriptions-item>
          <el-descriptions-item label="更新">
            <div>使用当前布局更新到当条数据！！！</div>
          </el-descriptions-item>
          <el-descriptions-item label="删除">
            <div>删除当条数据！！！</div>
          </el-descriptions-item>
          <el-descriptions-item label="复制">
            <div>通过3步完成复制布局</div>
            <div>1、增加一个【新布局】</div>
            <div>2、点击想要复制的页面的【编辑】按钮，回显布局到当前布局</div>
            <div>3、【新布局】点击【更新】，将当前布局更新到新页面上</div>
          </el-descriptions-item>
        </el-descriptions>            
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import {
  reactive,
  ref,
  toRefs,
  getCurrentInstance,
  watch,
  nextTick,
  onMounted
} from 'vue';
import { editableFieldArr, transforJson } from './transfer';
import { ElMessage, ElMessageBox } from 'element-plus';

const drawer = ref(false);

// 初始化
onMounted(() => {
  // getLayoutList()
});
const handleClose = () => {
  return true;
};
// 父组件可以调用的api
defineExpose({
  drawer,
});
</script>
<style lang="scss" scoped>
// .layout-manager {
//   padding: 20px;
// }
.help-box {
  display: flex;
  font-size: 16px;
  .help-box-left {
    // flex-basis: 400px;
    flex: 1;
  }
  .help-box-center {
    flex: 1;
  }
  .help-box-right {
    flex: 1;
    // flex-basis: 400px;
  }
  .waring-color {
    color: red;
    font-size: 18px;
  }
  :deep .el-descriptions__cell {
    font-size: 14px !important;
  }
  :deep .el-descriptions__label {
    width: 120px !important;
  }
}
</style>
